<template>
  <div class="record">
    <div v-if="list.length === 0" style="display:flex;align-items: center;justify-content: center;text-align:center;margin-top: 5%">
      <div>
        <img src="../../../../assets/img/slaEmpty.png" alt="">
        <div class="empty-text">暂无内容</div>
      </div>
    </div>
    <div v-else v-for="(item, index) in list" :key="index" class="
    record-item">
    <div class="cicle"><i class="V7_iconfont V7_iconV7tubiao_jilu"></i></div>
    <div class="time">{{item.time}}</div>
    <div class="service-content">{{item.content}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'service',
  components: {
  }
})
export default class Queue extends Vue {
  [x: string]: any
  @Prop(Object) public form!: any
  private list = []

  private get userObj () {
    return CommonModule.publicCache.userListObj
  }

  private queryList () {
    commonAction({
      url: `/server-work/action/serviceNode/list?modelId=${this.form.modelId}&orderId=${this.form.id}`,
      method: 'get'
    }).then(res => {
      if (res.success) {
        const list = res.data || []
        list.forEach(e => {
          if (e.orderCreateUser && (this.userObj[e.orderCreateUser]?.name)) {
            e.content = (e.content).replaceAll(`${e.orderCreateUser}`, this.userObj[e.orderCreateUser]?.name)
          }
          if (e.orderMaster && this.userObj[e.orderMaster]?.name) {
            e.content = (e.content).replaceAll(`${e.orderMaster}`, this.userObj[e.orderMaster]?.name)
          }
          if (e.orderUpdateUser && this.userObj[e.orderUpdateUser]?.name) {
            e.content = (e.content).replaceAll(`${e.orderUpdateUser}`, this.userObj[e.orderUpdateUser]?.name)
          }
        });
        this.list = list
      }
    })
  }

  private mounted () {
    this.queryList()
  }
}
</script>

<style lang="stylus" scoped>
.cicle
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  color: #fff;
  position: absolute;
  align-items: center;
  background: #008BEE;
  border-radius: 50%;
  top: -12px;
  left: 20px;
  box-shadow: 0px 1px 6px 0px rgba(98,172,224,0.56);
  .V7_iconfont
    font-size 12px
.record-item
  position relative
  margin-bottom: 35px
  border: 1px solid #ECF0F3
  border-radius: 4px
  padding: 0px 24px 16px 60px;
  .time
    padding-top: 16px;
    font-weight: 400;
    color: #686E84;
    padding-bottom: 14px;
    border-bottom: 1px solid #ECF0F3;
    margin-bottom: 14px;
  .service-content
    font-weight: 500;
    color: #303753;
.record-item:not(:last-child):after
    position: absolute;
    content: '';
    width: 1px;
    left: 30px;
    height: 35px;
    bottom: -36px;
    background-color: #ecf0f3;
.empty-text
	margin-top: 16px
</style>
